<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<!-- 此处设置对移动端页面开发很重要，该设置确保页面与设备相适应 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link type="text/css" rel="stylesheet" href="resources/css/bootstrap.min.css" >
<link type="text/css" rel="stylesheet" href="resources/css/font-awesome.min.css" >


<title>Insert title here</title>



<style type="text/css">
	
	html{
		height:100%; /* 高度填充整个窗口 */
	}
	body{
		height:100%; /* 高度填充整个html */
		padding:0; /* 内边距为0 */
		margin:0; /* 外边距为0 */
		background-color: #F5F5F5; /* 整个页面背景为淡灰色 */	
        background-image: url(resources/images/1.webp.jpg);
        background-size: 155% 100%;	
    }
    
    .my-container{
        
        position:fixed;/*固定定位*/
        left:0px;
        top:0px;
        right:0px;
        bottom:0px;

        /*background-color: red;*/

    }

    .my-header{
        position:absolute;/*绝对定位，即相对于父元素的定位*/
        left:0px;
        top:0px;
        width:100%;
        height:40px;

        display:flex; /*定义本元素为flex容器*/
        
        /* 指定flex容器主轴排列方向（与其垂直的方向即为交叉轴）， flex容器内部元素的排列方向*/;
        flex-direction:row; 
        justify-content:flex-end;/*指定主轴的对齐方式*/
        align-items:center; /*指定交叉轴的对齐方式*/;
        

        background-color:#0077DD;

    }

    .my-main{
        position:absolute;
        left:0px;
        top:40px;
        right:0px;
        bottom:40px;

        overflow: auto;
    }

    .my-footer{

        position:absolute;/*绝对定位，即相对于父元素的定位*/
        left:0px;
        bottom:0px;
        width:100%;
        height:40px;

        display:flex;
        flex-direction: row;

        border-top:1px solid #DDDDDD; /*边框 粗细、线型、颜色 */

        background-color:#FFFFFF;

        
    }

    .my-header-item{
        color:white;/*文字颜色*/
        margin: 0 5px 0 0;/* 上右下左四个外边距 */
        width:45px;
        text-align: center;/*内部文本水平居中*/
        border-radius:10px ;/*设置边框圆角半径*/

    }

    .my-header-item:active{/*点击时的样式*/
        background-color: red;
        color:yellow;
    }

    .my-footer-item{
        border-right:1px solid #EEEEEE;
        height:100%;
        color:teal;
        /*font-size:20px;*/

        flex: 1 1 auto; /*设置在flex容器的元素上，用于设置自适应缩放*/

        display:flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;

        padding-top:3px;
        
       


    }

    .my-home{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .my-card{

        width:96%;
        height:180px;
        border:1px solid #CCCCCC;
        border-radius: 10px;
        box-shadow: 0 0 5px 1px #CCCCCC;
        
        background-color: white;
        
        /*opacity: 0.3;
        
        background: transparent;/*传递父元素的背景，即背景透明*/
        margin:5px 0 5px 0;
        padding:5px;

        display:flex;
        flex-direction: row;
        justify-content:space-between;
        align-items: center;





    }

    .my-goods-info{
        display:flex;
        flex-direction: column;
        justify-content: center;
    }

    .my-goods-info>div{
        margin-bottom:5px;
    }
	
</style>

</head>
<body>

<div id="app" class="my-container" >

    <div class="my-header">
        <template v-if="!loginUserID" >
            <div class="my-header-item" @click="toLogin" >登录</div>
            <div class="my-header-item" @click="toRegister" >注册</div>
        </template>
        <template v-else >
            <div  class="my-header-item" ><i class="fa fa-user"></i> {{loginUserID}}</div>
            <div class="my-header-item" @click="execLogout" >退出</div>  
        </template>  
           
    </div>

    <div class="my-main">
        <div class="my-home"  v-if="currVisible=='home'" >
            <div v-for="goods in list"  class="my-card">
                <img :src="$server.baseURL() + goods.t_img" style="height:160px;">
                <div class="my-goods-info" style="margin-left:10px;">
                    <div style="font-weight: bold;">{{goods.t_name}} <span style="color:#AA0000;font-size:16px;font-weight:bold;">￥{{goods.t_price}}</span></div>
                    <div style="height:70px;overflow:hidden;">{{goods.g_img}}</div>   
                    <div>
                        <button type="button" class="btn btn-danger btn-sm"><i class="fa fa-shopping-cart"></i> 加入购物车</button>
                    </div>   
                </div>
               
               
            
            </div>
        </div>
        <div class="my-search" v-if="currVisible=='search'">
            <div v-for="goods in list"  class="my-card">
                <img :src="$server.baseURL() + goods.t_img" style="height:160px;">
                <div class="my-goods-info" style="margin-left:10px;">
                    <div style="font-weight: bold;">{{goods.t_name}} <span style="color:#AA0000;font-size:16px;font-weight:bold;">￥{{goods.t_price}}</span></div>
                    <div style="height:70px;overflow:hidden;">{{goods.g_img}}</div>   
                 <div>
                        <button type="button" class="btn btn-danger btn-sm"><i class="fa fa-shopping-cart"></i> 加入购物车</button>
                </div>  
                </div>
            </div>
        </div>
        <div class="my-mine" v-if="currVisible=='mine'" >
            <div v-for="goods in list"  class="my-card">
                <img :src="$server.baseURL() + goods.t_img" style="height:160px;">
                <div class="my-goods-info" style="margin-left:10px;">
                    <div style="font-weight: bold;">{{goods.t_name}} <span style="color:#AA0000;font-size:16px;font-weight:bold;">￥{{goods.t_price}}</span></div>
                    <div style="height:70px;overflow:hidden;">{{goods.g_img}}</div>   
                 <div>
                        <button type="button" class="btn btn-danger btn-sm"><i class="fa fa-shopping-cart"></i> 加入购物车</button>
                </div>  
                </div>
            </div>
        </div>
    </div>

    <div class="my-footer">
        <div id="home" class="my-footer-item" @click="currVisible='home'" :style="{backgroundColor:currVisible=='home'?'#DDDDDD':'#FFFFFF'}" ><i class="fa fa-home fa-lg"></i><span style="font-size:14px;">首页</span></div>
        <div id="search"  class="my-footer-item" @click="currVisible='search'" :style="{backgroundColor:currVisible=='search'?'#DDDDDD':'#FFFFFF'}" ><i class="fa  fa-search fa-lg"></i><span style="font-size:14px;">发现</span></div>
        <div id="mine"  class="my-footer-item" @click="currVisible='mine'" style="border-right:none;" :style="{backgroundColor:currVisible=='mine'?'#DDDDDD':'#FFFFFF'}"  ><i class="fa fa-user fa-lg"></i><span style="font-size:14px;">我的</span></div>
    </div>

</div>




</body>

<!-- 在body结尾之后引入以下js文件。 注意导入顺序不可以随意改变。 -->
<script src="resources/js/jquery-3.3.1.slim.min.js"></script>
<script src="resources/js/popper.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/js/vue.min.js"></script>
<script src="resources/layer_mobile/layer.js"></script>
<script src="resources/js/axios.min.js"></script>
<script src="resources/js/my-mobile.js"></script>

<script>
    /*
        vue是一个数据驱动式javascript框架：数据改变，界面即改变，需要改变界面，仅需改变数据。
    */



    var vm = new Vue({
        el:'#app',//指定渲染的元素
        data:{//定义数据
            list:[],
            currVisible:'home',

            //当前登录账号
            loginUserID:null,
           

        },
        methods:{//定义方法
            //调转到注册页
            
            show(selor){
                document.querySelector('#home').style.backgroundColor='white';
                document.querySelector('#search').style.backgroundColor='white';
                document.querySelector('#mine').style.backgroundColor='white';

                document.querySelector('#'+selor).style.backgroundColor='#EEEEEE';

                this.currVisible=selor;
                },
            
            toRegister(){
                location.href='register.html';
            },
            toLogin(){
                location.href='login.html';
            },
            execLogout(){
                this.$post('/execLogout.jsp')
                    .then(()=>{
                        this.loginUserID=null;
                    });
            }
        },
        mounted(){//定义界面渲染完成后需要执行的代码
            //document.querySelector('#home').style.backgroundColor='#EEEEEE';
            this.currVisible='home';

            this.$setServerConfig({
                ip:'localhost',
                port:8080,
                app:'Jarry3'
            });

            

            this.$get('/Jarry4.jsp')
                .then((data)=>{
                    this.list=data;
                });
            
            //获取登录用户
            this.$get('/currUserID.jsp')
                .then((result)=>{
                    this.loginUserID = result.data;
                })

        }
    });






   


</script>


</html>